<template>
  <div>
    <div class="platform_smuggle_num">
      <div class="platform_title">数据统计</div>
      <a-row type="flex" style="justify-content: space-evenly">
        <a-col v-for="(item, i) in smuggleDatas" :key="i">
          <a-card bordered>
            <template slot="cover">
              <div class="cover-left">
                <h4>{{ item.typeName }}</h4>
                <h3>{{ item.count }}</h3>
              </div>
              <div class="cover-right">
                <img height="60" :src="item.ico" />
              </div>
            </template>
          </a-card>
        </a-col>
      </a-row>
    </div>
    <a-row :gutter="[8, 8]">
      <a-col :span="12">
        <a-card title="最新告警" :bodyStyle="{ padding: '0', height: '348px' }">
          <a slot="extra" @click="onGjAll">查看全部</a>
          <a-table
            :columns="columns1"
            :loading="loading1"
            :data-source="alarmData"
            :pagination="false"
            style="margin-top:1px;line-height: 1.9;"
          >
            <a slot="name" slot-scope="text">{{ text }}</a>
            <template slot="order" slot-scope="text, record, index">
              {{ index + 1 }}
            </template>
            <template slot="alarmLevel" slot-scope="text">
              <a-tag v-if="text == 1" color="orange">黄色</a-tag>
              <a-tag v-if="text == 2" color="#FFA100">橙色</a-tag>
              <a-tag v-if="text == 3" color="red">红色</a-tag>
            </template>
          </a-table>
        </a-card>
      </a-col>
      <a-col :span="12" v-if="isApprover">
        <a-card title="审批列表" :bodyStyle="{ padding: '0', height: '348px' }">
          <a slot="extra" @click="onSpAll">查看全部</a>
          <a-table
            :columns="columns2"
            :loading="loading2"
            :data-source="spData"
            :pagination="false"
            style="margin-top:1px;"
          >
            <template slot="order" slot-scope="text, record, index">
              {{ index + 1 }}
            </template>
            <a slot="name" slot-scope="text">{{ text }}</a>
            <template slot="status" slot-scope="text, record">
              <span :class="[record.status == 2 ? 'green' : record.status == 3 ? 'red' : 'blue']">
                {{ getLabel(statusOptions, text) }}
              </span>
            </template>
          </a-table>
        </a-card>
      </a-col>
      <a-col :span="12" v-if="!isApprover">
        <a-card title="情报类型占比">
          <div slot="extra" style="display: flex;align-items: center;">
            <span style="width:120px; color: #999;">统计时间</span>
            <j-search-select-tag
              placeholder="请选择"
              v-model="timeframe.option2"
              @change="onQbChange"
              :dictOptions="smsDissuadeStatusOptions"
            />
          </div>
          <sm-pie
            :data="graphOption2.data"
            :color="graphOption2.color"
            hollow
            :hollowCenterText="graphOption2.hollowCenterText + '\n\n情报数量'"
            :legendRight="10"
            :legendPadding="[0, 0]"
            :itemGap="20"
            class="graph-box"
            v-if="graphOption2.data.length > 0"
          />
          <div class="graph-box" v-else><a-empty /></div>
        </a-card>
      </a-col>
      <a-col :span="spanValue">
        <a-card title="告警数量变化趋势">
          <div slot="extra" style="display: flex;align-items: center;">
            <span style="width:120px; color: #999;">统计时间</span>
            <j-search-select-tag
              placeholder="请选择"
              v-model="timeframe.option1"
              @change="onAlarmChange"
              :dictOptions="smsDissuadeStatusOptions"
            />
          </div>
          <sm-line-tip
            class="graph-box"
            :data="graphOption1.data"
            :color="graphOption1.color"
            v-if="graphOption1.data.length > 0"
          />
          <div class="graph-box" v-else><a-empty /></div>
        </a-card>
      </a-col>
      <a-col :span="12" v-if="isApprover">
        <a-card title="情报类型占比">
          <div slot="extra" style="display: flex;align-items: center;">
            <span style="width:120px; color: #999;">统计时间</span>
            <j-search-select-tag
              placeholder="请选择"
              v-model="timeframe.option2"
              @change="onQbChange"
              :dictOptions="smsDissuadeStatusOptions"
            />
          </div>
          <sm-pie
            :data="graphOption2.data"
            :color="graphOption2.color"
            hollow
            :hollowCenterText="graphOption2.hollowCenterText + '\n\n情报数量'"
            :legendRight="10"
            :legendPadding="[0, 0]"
            :itemGap="20"
            class="graph-box"
            v-if="graphOption2.data.length > 0"
          />
          <div class="graph-box" v-else><a-empty /></div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import * as alarmApi from '@/api/wxSmuggle/alarm.js'
import * as hpApi from '@/api/wxSmuggle/homePage.js'
import * as flowServerApi from '@/api/wxSmuggle/flowServer.js'
import { getRight2, getAllAlarmCount } from '@/views/daping/api/index2.js'
import { getDictItemsFromCache } from '@/api/api'
import smLineTip from '@/components/echarts/smLineTip.vue'
import smPie from '@/components/echarts/smPie.vue'
import { drctAlarmType } from '@/utils/tenantFilter'
export default {
  components: { smLineTip, smPie },
  data() {
    return {
      smsDissuadeStatusOptions: [
        { text: '近一天', value: '2' },
        { text: '近七天', value: '4' },
        { text: '近一月', value: '5' }
      ],
      smuggleDatas: [
        { typeName: '告警数量', count: '0', ico: require('@/assets/ico/home_1.png') },
        { typeName: '累计情报数量', count: '0', ico: require('@/assets/ico/home_2.png') },
        { typeName: '累计案事件数量', count: '0', ico: require('@/assets/ico/home_3.png') },
        { typeName: '累计种子号码数量', count: '0', ico: require('@/assets/ico/home_4.png') },
        { typeName: '累计走私重点人数量', count: '0', ico: require('@/assets/ico/home_5.png') }
      ],
      columns1: [
        {
          title: '序号',
          dataIndex: 'order',
          align: 'center',
          width: 50,
          scopedSlots: { customRender: 'order' }
        },
        {
          title: '手机号码',
          dataIndex: 'phone',
          align: 'center',
          width: 120
          // customRender: t => <j-ellipsis value={t} length={7} />
        },
        {
          title: '告警类型',
          dataIndex: 'alarmType',
          align: 'center',
          width: 170,
          customRender: (text, record) => {
            return this.filterMultiDictText(drctAlarmType, text)
          }
        },
        {
          title: '告警程度',
          dataIndex: 'alarmLevel',
          align: 'center',
          width: 70,
          scopedSlots: { customRender: 'alarmLevel' }
        },
        {
          title: '告警时间',
          dataIndex: 'alarmTime',
          align: 'center',
          width: 110,
          customRender: t => <j-ellipsis value={t} length={12} />
        }
      ],
      columns2: [
        {
          title: '序号',
          dataIndex: 'order',
          align: 'center',
          width: 60,
          scopedSlots: { customRender: 'order' }
        },
        {
          title: '任务编号',
          dataIndex: 'taskCode',
          width: 90,
          align: 'left',
          customRender: t => <j-ellipsis value={t} length={6} />
        },
        {
          title: '任务名称',
          dataIndex: 'taskName',
          align: 'left',
          ellipsis: true,
          customRender: t => <j-ellipsis value={t} length={7} />
        },
        {
          title: '案事件名称',
          dataIndex: 'incidentName',
          align: 'left',
          ellipsis: true,
          width: 110
          // customRender: t => <j-ellipsis value={t} length={9} />
        },
        {
          title: '所属单位',
          dataIndex: 'departName',
          align: 'left',
          width: 90,
          customRender: t => <j-ellipsis value={t} length={3} />
        },
        {
          title: '任务起始时间',
          dataIndex: 'eventTime',
          width: 190,
          align: 'center'
        },
        {
          title: '状态',
          dataIndex: 'status',
          width: 80,
          align: 'center',
          scopedSlots: { customRender: 'status' }
        }
      ],
      loading1: false,
      loading2: false,
      alarmData: [],
      spData: [],
      timeframe: {
        option1: '4',
        option2: '4'
      },
      alarmLevelOptions: [
        { text: '红色告警', value: '3' },
        { text: '橙色告警', value: '2' },
        { text: '黄色告警', value: '1' }
      ],
      statusOptions: [
        { text: '全部', value: '' },
        // { text: '未审批', value: '0', },
        { text: '待审批', value: '1' },
        { text: '通过', value: '2' },
        { text: '驳回	', value: '3' }
      ],
      graphOption2: {
        data: [],
        hollowCenterText: '',
        color: ['#00a2ff', '#00cece', '#00ce7a', '#ffd136', '#ff5873', '#a05de2', '#ff9502']
      },
      graphOption1: {
        data: [],
        color: ['#00a2ff', '#00cece', '#ffd550', '#ff934a', '#ff6c6d', '#ff74c2', '#c7468e']
      },
      alarmTypeDatas: null,
      isApprover: true,
      spanValue: 12
    }
  },
  mounted() {
    console.log('drctAlarmType')
    console.log(drctAlarmType)
    this.alarmTypeDatas = drctAlarmType
    this.onQuery()
  },
  methods: {
    onQuery() {
      this.getIsApprover()
      this.getAllAlarmData()
      this.getQuerySmuSummaryCount()
      this.getAlarmData()
      this.getQuerySmuDataSource(4) //默认近七天
      this.getQueryDynamicTypeRatio(4) //默认近七天
    },
    // 是否审批人
    getIsApprover() {
      hpApi.isApprover().then(res => {
        if (res.success) {
          this.isApprover = res.result
          if (this.isApprover) {
            this.spanValue = 12
            this.getSpData()
          } else {
            this.spanValue = 24
          }
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    //告警总数
    getAllAlarmData() {
      getAllAlarmCount({ moduleType: 2 }) //1大屏 2首页
        .then(res => {
          if (res.success) {
            this.smuggleDatas[0].count = res.result
          } else {
            this.$message.warn(res.message)
          }
        })
    },
    //告警列表
    getAlarmData() {
      let pageFilter = {
        pageNo: 1,
        pageSize: 5
      }
      this.loading1 = true
      alarmApi.getPageList(pageFilter).then(res => {
        if (res.success) {
          this.alarmData = res.result.records
          this.loading1 = false
        } else {
          this.loading1 = false
          this.$message.warn(res.message)
        }
      })
    },
    //审批列表
    getSpData() {
      let pageFilter = {
        pageNo: 1,
        pageSize: 5,
        status: 1 //待审批
      }
      this.loading2 = true
      flowServerApi.getProcessInfoList(pageFilter).then(res => {
        if (res.success) {
          this.spData = res.result.records
          this.loading2 = false
        } else {
          this.loading2 = false
        }
      })
    },
    // 头部汇总数据
    getQuerySmuSummaryCount() {
      hpApi.getByTypeTotal().then(res => {
        if (res.success) {
          let data = res.result
          for (let key in data) {
            let num = data[key].count ? data[key].count : 0
            for (let item of this.smuggleDatas) {
              if (data[key].typeName === item.typeName) {
                this.$set(item, 'count', num)
              }
            }
          }
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    // 告警数量变化趋势
    getQuerySmuDataSource(timeType) {
      getRight2({ moduleType: 2, queryTimeType: timeType }) //1大屏 2首页
        .then(res => {
          if (res.success) {
            let result = res.result
            // let result = [
            //   { date: '2022-04-11', value: '1' },
            //   { date: '2022-04-12', value: '25' },
            //   { date: '2022-04-13', value: '88' },
            //   { date: '2022-04-14', value: '25' }
            // ]
            let data = []
            for (let item in result) {
              let obj1 = { product: result[item].date }
              let obj2 = { 总数: result[item].alarmLevelCount }
              let obj3 = { alarmLevelList: result[item].alarmLevelList }
              data[item] = Object.assign({}, obj1, obj2, obj3)
            }
            this.graphOption1.data = data
          } else {
            this.$message.warning(res.message)
          }
        })
    },
    onAlarmChange(val) {
      this.getQuerySmuDataSource(val)
    },
    // 情报类型占比
    getQueryDynamicTypeRatio(timeType) {
      hpApi.getByIntelligenceType({ timeType: timeType }).then(res => {
        if (res.success) {
          // let data = res.result
          // let result = [
          //   { label: '作案手机模型', radio: 26, value: 55 },
          //   { label: '异常出入岛挖掘', radio: 26, value: 55 },
          //   { label: '异常通联行为人员', radio: 26, value: 55 },
          //   { label: '消费行为异常人员', radio: 26, value: 55 },
          //   { label: '异常资金往来挖掘', radio: 26, value: 55 },
          //   { label: '涉走私水客群体挖掘', radio: 26, value: 55 },
          //   { label: '可疑船舶与人员', radio: 26, value: 55 }
          // ]
          let data = res.result.map(item => {
            return {
              product: item.modelName,
              ratio: item.ratio + '%',
              count: item.num
            }
          })
          this.graphOption2.data = data
          this.graphOption2.hollowCenterText = this.countTotal(data, 'count')
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    onQbChange(val) {
      this.getQueryDynamicTypeRatio(val)
    },
    //计算对象数组中某个属性合计
    countTotal(arr, keyName) {
      let $total = 0
      $total = arr.reduce(function(total, currentValue, currentIndex, arr) {
        return currentValue[keyName] ? total + currentValue[keyName] : total
      }, 0)
      return $total
    },
    filterMultiDictText(dictCode, text) {
      if (!text && text !== 0) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    },
    getItemsFrom(datas, key) {
      let item = datas.filter(t => t['value'] == key)
      if (item && item.length > 0) {
        return item[0]['text']
      }
    },
    getLabel(datas, value) {
      let text = ''
      let item = datas.find(obj => {
        return obj.value == value
      })
      if (item && Object.keys(item).length > 0) {
        text = item.text
      }
      return text
    },
    onSpAll() {
      this.$router.push('/dataAuditing/examine')
    },
    onGjAll() {
      this.$router.push('/allAlarmMap')
    }
  }
}
</script>
<style lang="less" scoped>
.platform_smuggle_num {
  background-color: #ffffff;
  border: 1px solid #e8e8e8;
  padding-top: 16px;
  margin: 10px 0;
  .platform_title {
    padding: 0 20px 16px;
    font-size: 16px;
    font-weight: 500;
    border-bottom: 1px #e8e8e8 solid;
    margin-bottom: 16px;
  }
  /deep/.ant-card {
    min-width: 250px;
    max-width: 250px;
    margin: 0 auto 20px;
  }
  /deep/.ant-card-cover {
    display: flex;
    justify-content: space-between;
    h4 {
      font-size: 14px;
      font-weight: 500;
    }
    h3 {
      font-size: 26px;
    }
    .cover-left {
      padding: 10px 10px 0 10px;
    }
    .cover-right {
      position: relative;
      text-align: center;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      flex: 0 0 80px;
      // img {
      // border-radius: 50%;
      // border: 1px #e8e8e8 solid;
      // }
      .anticon {
        position: absolute;
        right: 0;
        top: 0;
      }
    }
  }
  /deep/.ant-card-body {
    padding: 6px;
    border-top: 1px solid #e8e8e8;
    .ant-card-meta-description {
      color: #666;
    }
  }
}
.graph-box {
  height: 300px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  &.min {
    height: 268px;
  }
  &.min1 {
    height: 263px;
  }
}
/deep/.ant-table {
  line-height: 1.9;
}
.text_color_1 {
  color: #bfbf00;
  padding-right: 6px;
}
.text_color_2 {
  color: #f59a23;
  padding-right: 6px;
}
.text_color_3 {
  color: #d9001b;
  padding-right: 6px;
}
// 表格无数据时边距
/deep/.ant-empty-normal {
  margin-top: 92px;
  margin-bottom: 92px;
}
/deep/.ant-card-extra {
  padding: 0;
}
</style>
